<script setup>
import Retail from "../components/Retail.vue";
// import Wholesale from "../components/Wholesale.vue";
import { skuList } from "@/utils/constClass.js";
import { computed, nextTick, ref } from "vue";
const retailRef = ref();
const activeName = ref("产品");
const tablist = computed(() => {
  return skuList.filter((v) => v.type != "goods");
});
const formInline = ref([
  {
    type: "input",
    prop: "name",
    placeholder: activeName.value + "名称/编号/助记码",
    label: "",
    width: "180",
    model: "",
  },
]);
const tableConfig = ref([
  {
    prop: "ygxm",
    label: activeName.value + "编号",
  },
  {
    prop: "phone",
    type: "slot",
    slotName: "phone",
    label: activeName.value + "图片",
    width: "500",
  },
]);
const tabChange = (e) => {
  formInline.value = [
    {
      type: "input",
      prop: "name",
      placeholder: e + "名称/编号/助记码",
      label: "",
      width: "180",
      model: "",
    },
  ];
  tableConfig.value = [
    {
      prop: "ygxm",
      label: e + "编号",
    },
    {
      prop: "phone",
      type: "slot",
      slotName: "phone",
      label: e + "图片",
      width: "500",
    },
  ];
  nextTick(() => {
    retailRef.value[0].initSearch();
  });
};
</script>
<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange">
    <el-tab-pane
      v-for="item in tablist"
      :key="item.type"
      :label="item.name"
      :name="item.name"
    >
      <Retail
        v-if="item.name == activeName"
        ref="retailRef"
        :formInline="formInline"
        :tableConfig="tableConfig"
      ></Retail>
    </el-tab-pane>
  </el-tabs>
</template>

<style lang="less" scoped>
.demo-tabs {
  height: 100%;
  :deep(.el-tabs__content) {
    height: calc(100% - 40px);
  }
  :deep(.el-tab-pane) {
    height: 100%;
  }
  :deep(.el-tabs__header) {
    margin-bottom: 0;
  }
  :deep(.el-tabs__item.is-active) {
    color: var(--el-color-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
  }
}
</style>
